<!-- 重点危险工艺 -->
<template>
    <div class="workManShip">
        <div class="workManShip_title">
            数据总量：
            <span>4</span>
            种
        </div>
        <ul>
            <li v-for="(item, index) in data.list" :key="index">
                <div class="top">
                    <span>{{ item.name }}</span>
                    <span :style="{ background: item.color }">
                        {{ item.value }}
                        <span>个</span>
                    </span>
                </div>
                <div class="line">
                    <div class="line_bg">
                        <div class="line_bg_active" :style="{ background: item.lineColor }"><span></span></div>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</template>
<script lang="ts" setup>
import { reactive, onMounted, nextTick } from 'vue';

const data = reactive({
    list: [
        {
            name: '加氢工艺',
            value: 24,
            color: 'linear-gradient(0deg, #2d93fb 0%, #58c6fd 100%)',
            lineColor: 'linear-gradient(180deg, #2D93FB 0%, #58C6FD 100%)'
        },
        {
            name: '烷基化工艺',
            value: 30,
            color: 'linear-gradient(0deg, #2DBAFB 0%, #58F3FD 99.5849609375%)',
            lineColor: 'linear-gradient(180deg, #2DBAFB 0%, #58F3FD 100%)'
        },
        {
            name: '氧化工艺',
            value: 23,
            color: 'linear-gradient(0deg, #2DFBF4 0.146484375%, #58FDCC 100%)',
            lineColor: 'linear-gradient(180deg, #2DFBF4 0%, #58FDCC 100%)'
        },
        {
            name: '裂化工艺',
            value: 26,
            color: 'linear-gradient(0deg, #2D32FB 0%, #58AAFD 100%)',
            lineColor: 'linear-gradient(180deg, #2D32FB 0%, #58AAFD 98%)'
        }
    ]
});
</script>

<style scoped lang="scss">
.workManShip {
    &_title {
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 12px;
        span {
            font-size: 20px;
            @include pmzd();
        }
    }
    ul {
        li {
            margin-bottom: vh(5);
            &:last-of-type {
                margin-bottom: 0;
            }
            .top {
                display: flex;
                align-items: flex-end;
                justify-content: space-between;

                span {
                    color: #fff;
                    font-size: 12px;
                    &:last-of-type {
                        font-size: 20px;
                        -webkit-background-clip: text !important;
                        -webkit-text-fill-color: transparent;
                        font-weight: bold;
                        span {
                            font-weight: 100;
                            font-size: 12px;
                            margin-left: -4px;
                        }
                    }
                }
            }
            .line {
                margin-top: vh(8);
                &_bg {
                    width: 100%;
                    background: #084c99;
                    position: relative;
                    height: 4px;
                    &_active {
                        position: absolute;
                        left: 0;
                        top: 0;
                        height: vh(4);
                        width: 50%;
                        span {
                            position: absolute;
                            right: -4px;
                            top: -3px;
                            display: block;
                            width: 6px;
                            height: 6px;
                            background: #fff;
                            border-radius: 100%;
                            border: 2px solid #23fffc;
                            padding: 3px;
                        }
                    }
                }
            }
        }
    }
}
</style>
